<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修缮信息管理</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" href="css/apaltment.css">
<link rel="stylesheet" href="css/jquery.sPage.css">
<link rel="stylesheet" href="css/jquery.sPage.green.css">
<link rel="stylesheet" href="css/jquery.sPage.red.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.loading{
	width:200px;
	margin-left:45%;
}
    	.num{
            height: 50px;
    		line-height: 50px;
    		text-align: center;
    	}
    	.demo{
            margin-bottom: 20px;
            text-align: center;
        }
        /*租户详情页*/
		.xiangqing{
			width:100%;
			height:40px;
			background:floralwhite;
			margin:0 auto;
		}
		.modal-header{
			background:skyblue !important;
			color:saddlebrown !important;
		}
		.xiangqing:nth-child(2n){
			background:white !important;
		}
		.xiangqing div{
			height:40px;
			font-size:16px;
			line-height:40px;
		}
		.xiang_left{
			text-align:center;
			width:30% !important;
			float:left !important;
		}
		.xiang_right{
			text-align:left;
			width:70% !important;
			float:right !important;
		}
    </style>
</head>
<body>
<div class="search">
		
        <form action="">
        <span onclick="chooseDongtai()" class="btn btn-primary" style="margin-right:10px" data-toggle='modal' data-target='#add'>添加</span>
            <label>
                <span>修缮状态：</span>
                <select id="hr_state2">
                	<option value="">--请选择--</option>
                	<option value="已修缮">已修缮</option>
                	<option value="未修缮">未修缮</option>
                </select>
            </label>
            <label>
                <span>修缮时间：</span>
                <input type="date" style="line-height:25px" id="hr_time2">
            </label>
            
            <button type="button" id="searchRepair" style="margin-left: 25px" class="btn btn-primary">查询</button>
        </form>
    </div>
<table class="table table-bordered" style="margin-top: 20px;">
    
    <thead>
        <tr>
            <th>详细地址</th>
            <th>修缮人员</th>
            <th>修缮房间</th>
            <th>修缮状态</th>
            <th>修缮时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="msg">
        
    </tbody>
</table>
 <img class="noneData" style="display:none" src="images/dataNone.png">
<img class="loading" src="images/loading.gif">
<div id="myPage" class="demo"></div>

<!-- 修改 -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="hr_id" hidden>
                    <input type="text" id="l_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">所属地区：</label>
                            <div class="col-sm-9">
                                <input disabled id="h_region" type="text" class="form-control" placeholder="请输入所属地区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">所属小区：</label>
                            <div class="col-sm-9">
                                <input disabled id="h_village" type="text" class="form-control" placeholder="请输入所属小区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">单元号：</label>
                            <div class="col-sm-9">
                                <input disabled id="h_unit" type="text" class="form-control" placeholder="请输入单元号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">房间号：</label>
                            <div class="col-sm-9">
                                <input disabled id="h_roomnum" type="text" class="form-control" placeholder="请输入房间号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮员工：</label>
                            <div class="col-sm-9">
                                <input disabled id="l_name" type="text" class="form-control" placeholder="请输入修缮员工">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮状态：</label>
                            <div class="col-sm-9">
                            	<select class="form-control" id="hr_state">
                            		<option value="已修缮">已修缮</option>
                            		<option value="未修缮">未修缮</option>
                            	</select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮时间：</label>
                            <div class="col-sm-9">
                                <input id="hr_time" type="date" style="line-height:25px" class="form-control" placeholder="请输入修缮时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮内容：</label>
                            <div class="col-sm-9">
                                <input id="hr_explain" type="text" class="form-control" placeholder="请输入修缮内容">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="updateRepairs" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
<!-- 添加 -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="t_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">所属地区：</label>
                            <div class="col-sm-9">
                            <select class="form-control chooseDiqu" id="h_region4">
                                	<option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">所属小区:</label>
                            <div class="col-sm-9">
                                <select class="form-control chooseXiaoqu" id="h_village4">
                                	<option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">单元号:</label>
                            <div class="col-sm-9">
                                <select class="form-control chooseDanyuan" id="h_unit4">
                                	<option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">房间号：</label>
                            <div class="col-sm-9">
                                <select class="form-control chooseFangjian" id="h_roomnum4">
                                	<option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮员工：</label>
                            <div class="col-sm-9">
                                <input id="l_name4" type="text" class="form-control number" placeholder="请输入修缮员工">
                            </div>
                        </div>
                        
                         <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮状态：</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="hr_state4">
                                	<option value="">--请选择--</option>
                                	<option value="已修缮">已修缮</option>
                                	<option value="未修缮">未修缮</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮内容：</label>
                            <div class="col-sm-9">
                                <input id="hr_explain4" type="text" class="form-control number" placeholder="请输入修缮内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">修缮时间：</label>
                            <div class="col-sm-9">
                                <input id="hr_time4" type="date" style="line-heght:25px" class="form-control number" placeholder="请输入修缮内容">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="addTenants" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
<!-- 详情 -->
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        详情信息
                    </h4>
                </div>
                <div class="modal-body" style="overflow:hidden">
					<div class="xiangqing">
						<div class="xiang_left">详细地址：</div>
   						<div class="xiang_right addr"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">房间号：</div>
   						<div class="xiang_right h_roomnum"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">修缮员工：</div>
   						<div class="xiang_right l_name"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">员工电话：</div>
   						<div class="xiang_right l_phone"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">修缮状态：</div>
   						<div class="xiang_right hr_state"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">修缮时间：</div>
   						<div class="xiang_right hr_time"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">修缮内容：</div>
   						<div class="xiang_right hr_explain"></div>
					</div>
					
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
</body>
<script src="js/jquery.sPage.js"></script>
<script>
$(function(){
    ajaxPage(1);
});

function ajaxPage(page){
	$.ajax({
		url:"showHouseRepairDataServlet",
		dataType:"JSON",
		type:"post",
		data:{pageNum:page},
		success:function(data){
			$(".loading").css({"display":"none"})
			console.log(data)
			var msg = ""
			//var pages=data[0]
			var sum=data["Count"]
			delete data["Count"]
			delete data["pageCount"]
			$.each(data,function(i,item){
				if(item["l_name"]==undefined){
					item["l_name"]="该员工已离职"
				}
				msg += "<tr>"+
				"<td>"+item["h_region"]+"--"+item["h_village"]+"--"+item["h_unit"]+"</td>"+
				"<td>"+item["l_name"]+"</td>"+
				"<td>"+item["h_roomnum"]+"</td>"+
				"<td>"+item["hr_state"]+"</td>"+
				"<td>"+item["hr_time"]+"</td>"+
				"<td>"+
					"<span onclick='getDetail("+item['hr_id']+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span onclick='getDetail("+item['hr_id']+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
					"<span onclick='deleteById("+item['hr_id']+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            ajaxPage(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
}

//删除修缮记录
function deleteById(hr_id){
	console.log(hr_id)
	if(confirm("确定删除吗？")){
		$.ajax({
			url:"deleteHouseRepairDataByIdServlet",
			dataType:"JSON",
			type:"post",
			data:{hr_id:hr_id},
			success:function(data){
				alert("请求成功")
				window.location.reload()
			},
			error:function(err){
				console.log("请求失败")
				console.log(err)
			}
		})
	}
}

//详情页
function getDetail(hr_id){
	$.ajax({
		url:"showHouseRepairDataByIDServlet",
		dataType:"JSON",
		type:"post",
		data:{hr_id:hr_id},
		success:function(data){
			console.log("请求成功")
			console.log(data)
			if(data["l_name"]==undefined){
				data["l_name"]="该员工已离职"
				data["l_phone"]=""
			}
			$(".addr").html(data["h_region"]+"---"+data["h_village"]+"---"+data["h_unit"])
			$(".h_roomnum").html(data["h_roomnum"])
			$(".l_name").html(data["l_name"])
			$(".l_phone").html(data["l_phone"])
			$(".hr_state").html(data["hr_state"])
			$(".hr_time").html(data["hr_time"])
			$(".hr_explain").html(data["hr_explain"])
			
			$("#l_id").val(data["l_id"])
			$("#hr_id").val(data["hr_id"])
			$("#h_village").val(data["h_village"])
			$("#h_unit").val(data["h_unit"])
			$("#h_region").val(data["h_region"])
			$("#h_roomnum").val(data["h_roomnum"])
			$("#l_name").val(data["l_name"])
			$("#hr_state").val(data["hr_state"])
			$("#hr_time").val(data["hr_time"])
			$("#hr_explain").val(data["hr_explain"])
			
		},
		error:function(err){
			console.log("请求失败")
		}
	})
}

//条件查询
$("#searchRepair").click(function(){
	$("#msg").html("")
	$(".loading").css({"display":"block"})
	$(".noneData").css({display:"none"})
	search(1)
})
function search(page){
	$.ajax({
		url:"showHouseRepairByConditionServlet", 
		dataType:"JSON",
		type:"post",
		data:{
			"hr_state":$("#hr_state2").val(),
			"hr_time":$("#hr_time2").val(),
			"pageNum":page
		},
		success:function(data){
			$(".loading").css({"display":"none"})
			console.log(data)
			var msg = ""
			//var pages=data[0]
			var sum=data["Count"]
			delete data["Count"]
			delete data["pageCount"]
			$.each(data,function(i,item){
				if(item["l_name"]==undefined){
					item["l_name"]="该员工已离职"
				}
				msg += "<tr>"+
				"<td>"+item["h_region"]+"--"+item["h_village"]+"--"+item["h_unit"]+"</td>"+
				"<td>"+item["l_name"]+"</td>"+
				"<td>"+item["h_roomnum"]+"</td>"+
				"<td>"+item["hr_state"]+"</td>"+
				"<td>"+item["hr_time"]+"</td>"+
				"<td>"+
					"<span onclick='getDetail("+item['hr_id']+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span onclick='getDetail("+item['hr_id']+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
					"<span onclick='deleteById("+item['hr_id']+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            search(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		}
	})
}

//动态选择地区、小区、单元号、房间号
function chooseDongtai(){
	$.ajax({
		url:"houseRepairQueryRegionServlet", 
		dataType:"JSON",
		type:"post",
		success:function(data){
			var options=""
				for(var i=0;i<data.length;i++){
					options += "<option value="+data[i]+">"+data[i]+"</option>"
				}
			$(".chooseDiqu").html(options)
			$.ajax({
				url:"houseRepairQueryVillageServlet", 
				dataType:"JSON",
				type:"post",
				data:{"h_region":$(".chooseDiqu").val()},
				success:function(data){
					var options=""
						for(var i=0;i<data.length;i++){
							options += "<option value="+data[i]+">"+data[i]+"</option>"
						}
					$(".chooseXiaoqu").html(options)
					$.ajax({
						url:"houseRepairQueryUnitServlet", 
						dataType:"JSON",
						type:"post",
						data:{
							"h_region":$(".chooseDiqu").val(),
							"h_village":$(".chooseXiaoqu").val()
						},
						success:function(data){
							var options=""
								for(var i=0;i<data.length;i++){
									options += "<option value="+data[i]+">"+data[i]+"</option>"
								}
							$(".chooseDanyuan").html(options)
							$.ajax({
								url:"houseRepairQueryRoomnumServlet", 
								dataType:"JSON",
								type:"post",
								data:{
									"h_region":$(".chooseDiqu").val(),
									"h_village":$(".chooseXiaoqu").val(),
									"h_unit":$(".chooseDanyuan").val()
								},
								success:function(data){
									var options=""
										for(var i=0;i<data.length;i++){
											options += "<option value="+data[i]+">"+data[i]+"</option>"
										}
									$(".chooseFangjian").html(options)
								}
							})
						}
					})
				}
			})
			
		},
	})
}
//改变状态
$(".chooseDiqu").change(function(){
	$.ajax({
		url:"houseRepairQueryVillageServlet", 
		dataType:"JSON",
		type:"post",
		data:{"h_region":$(".chooseDiqu").val()},
		success:function(data){
			var options=""
				for(var i=0;i<data.length;i++){
					options += "<option value="+data[i]+">"+data[i]+"</option>"
				}
			$(".chooseXiaoqu").html(options)
			$.ajax({
				url:"houseRepairQueryUnitServlet", 
				dataType:"JSON",
				type:"post",
				data:{
					"h_region":$(".chooseDiqu").val(),
					"h_village":$(".chooseXiaoqu").val()
				},
				success:function(data){
					var options=""
						for(var i=0;i<data.length;i++){
							options += "<option value="+data[i]+">"+data[i]+"</option>"
						}
					$(".chooseDanyuan").html(options)
					$.ajax({
						url:"houseRepairQueryRoomnumServlet", 
						dataType:"JSON",
						type:"post",
						data:{
							"h_region":$(".chooseDiqu").val(),
							"h_village":$(".chooseXiaoqu").val(),
							"h_unit":$(".chooseDanyuan").val()
						},
						success:function(data){
							var options=""
								for(var i=0;i<data.length;i++){
									options += "<option value="+data[i]+">"+data[i]+"</option>"
								}
							$(".chooseFangjian").html(options)
						}
					})
				}
			})
		}
	})
})
$(".chooseXiaoqu").change(function(){
	$.ajax({
		url:"houseRepairQueryUnitServlet", 
		dataType:"JSON",
		type:"post",
		data:{
			"h_region":$(".chooseDiqu").val(),
			"h_village":$(".chooseXiaoqu").val()
		},
		success:function(data){
			var options=""
				for(var i=0;i<data.length;i++){
					options += "<option value="+data[i]+">"+data[i]+"</option>"
				}
			$(".chooseDanyuan").html(options)
			$.ajax({
				url:"houseRepairQueryRoomnumServlet", 
				dataType:"JSON",
				type:"post",
				data:{
					"h_region":$(".chooseDiqu").val(),
					"h_village":$(".chooseXiaoqu").val(),
					"h_unit":$(".chooseDanyuan").val()
				},
				success:function(data){
					var options=""
						for(var i=0;i<data.length;i++){
							options += "<option value="+data[i]+">"+data[i]+"</option>"
						}
					$(".chooseFangjian").html(options)
				}
			})
		}
	})
})
$(".chooseDanyuan").change(function(){
	$.ajax({
		url:"houseRepairQueryRoomnumServlet", 
		dataType:"JSON",
		type:"post",
		data:{
			"h_region":$(".chooseDiqu").val(),
			"h_village":$(".chooseXiaoqu").val(),
			"h_unit":$(".chooseDanyuan").val()
		},
		success:function(data){
			var options=""
				for(var i=0;i<data.length;i++){
					options += "<option value="+data[i]+">"+data[i]+"</option>"
				}
			$(".chooseFangjian").html(options)
		}
	})
})

//修改数据
$("#updateRepairs").click(function(){
	console.log("Sdas")
	$.ajax({
		url:"alterHouseRepairByIdServlet", 
		dataType:"JSON",
		type:"post",
		data:{
			"l_id":$("#l_id").val(),
			"l_name":$("#l_name").val(),
			"h_region":$("#h_region").val(),
			"h_village":$("#h_village").val(),
			"h_unit":$("#h_unit").val(),
			"h_roomnum":$("#h_roomnum").val(),
			"hr_time":$("#hr_time").val(),
			"hr_state":$("#hr_state").val(),
			"hr_explain":$("#hr_explain").val(),
			"hr_id":$("#hr_id").val()
		},
		success:function(data){
			alert("修改成功")
			window.location.reload()
		}
	})
})

//添加修缮记录
$("#addTenants").click(function(){
	console.log("DAS")
	$.ajax({
		url:"addHouseRepairDataServlet", 
		dataType:"JSON",
		type:"post",
		data:{
			"l_name":$("#l_name4").val(),
			"h_region":$("#h_region4").val(),
			"h_village":$("#h_village4").val(),
			"h_unit":$("#h_unit4").val(),
			"h_roomnum":$("#h_roomnum4").val(),
			"hr_time":$("#hr_time4").val(),
			"hr_state":$("#hr_state4").val(),
			"hr_explain":$("#hr_explain4").val(),
			"hr_time":$("#hr_time4").val(),
		},
		success:function(data){
			alert("请求成功")
			window.location.reload()
		},
		error:function(err){
			console.log("请求失败")
		}
	})
})
</script>
</html>